<template>
  <div class="login">
    <div class="box">
      <h2>欢迎登录</h2>
    <van-cell-group class="lg">
    <van-field
      v-model="username"
      required
      clearable
      label="用户名"
      right-icon="question-o"
      placeholder="请输入用户名"
      @click-right-icon="$toast('question')"
    />

    <van-field
      v-model="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
      required
    />
    </van-cell-group>
    <van-button type="primary" class="dl" size="small" @click="loginHandle()">登录</van-button>
    <van-button type="primary" class="dl jia" size="small" @click="Handle()">注册</van-button>
    <van-button type="primary" class="dl jia" size="small" @click="fanhui()">返回首页</van-button>



    </div>
  </div>
</template>

<script>
import { login } from '../api/log'
export default {
  data() {
    return {
        username:'',
        password:''
    }
  },
  methods: {
      async loginHandle() {
        const res = await login({userName:this.username,password:this.password});
        localStorage.setItem('token', res.data.token);
        // console.log(token);
        console.log(res);
        if(res.data.code == 'success') {
        this.$router.push({name:'shouYe'});
        }else{
          this.$router.push({name:''})
        }
      },
      Handle(){
        this.$router.push({name:'Zhuce'});
      },
      fanhui() {
        this.$router.push({name:'shouYe'});
      }
    }
  }

</script>
<style scoped>
h2{
  text-align: center;
  opacity: .7;
}
.login{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 30px;

}
.box{
  margin-top: 200px;
}
.dl{
    margin-top: 20px;
    width: 100%;
    border-radius: 20px;
    opacity: .7;
  }
  .lg{
    color: rgba(188, 188, 188, .1)
  }
.login{
  background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1775786694,1475171178&fm=26&gp=0.jpg');
  /* background-size: 100%; */
}
.jia{
  width: 50%;
}

</style>
